<template>
  <div>
    <!-- <div class="top">
          登录账号
      </div> -->
    <div class="logo">
      <img src="/logo.png" alt="" />
    </div>
    <div class="box">
      <input class="phone" type="text" placeholder="请输入手机号" />
      <input class="sub" type="text" placeholder="请输入密码" /><br />
      <button @click="login()">登录</button>
      <!-- <input type="button"> -->
    </div>

    <div class="forget">
      <a href="#"> 忘记密码</a>
      <a href="#" @click="register()">创建账号</a>
    </div>

    <Bottom/>
    
  </div>
</template>

<script>
import Bottom from "@/views/login/bottom.vue"

export default {
    components:{
        Bottom
    
    },
  methods: {
    login() {
      this.$router.push("/shouye");
     
    },
     register(){
          this.$router.push("/register")
      }
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 80px;
  line-height: 80px;
  /* background-color: aqua; */
  margin: auto;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}
.logo {
  width: 100%;
  margin: auto;
  height: 80px;
}
.logo img {
  width: 100%;
  height: 100%;
}
.box{
   
    /* background-color: red; */
      width: 340px;
      margin: auto;
      text-align: center;
     

}
 .phone, .sub{
    width:300px;
    height:55px;
    margin-top: 25px;
    background-color: #f9fafc;
    border: none;
    border-radius: 30px;
    font-size: 0.14rem;
    /* text-align: center; */
}
button{
    width: 300px;
    height: 45px;
    background-color:#61af5b ;
    border-radius: 30px;
    border: none;
    margin-top: 25px;
    color: white;
}
.forget{
    width: 300px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

</style>